<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>出院登记</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" th:href="@{/element-ui/lib/theme-chalk/index.css}">
  <style>
    [v-cloak] {
      display: none;
    }
    body {
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 450px;
      margin: auto;
    }

    h1 {
      text-align: center;
      color: #333;
      font-size: 30px;
      margin-bottom: 20px;
    }

    .hospital-element {
      margin-top: 25%;
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .hospital-element2 {
      background-color: rgba(181, 229, 181, 0.53);
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .element-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .element-description {
      color: #666;
      margin-bottom: 20px;
    }
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>
</head>

<body>
<div id="app" v-cloak>



  <div v-cloak>
    <div class="container" style="margin-top: 6%">
      <i class="el-icon-back" @click="goHome"  style="position: absolute; top: 20px;left: 20px;font-size: 24px">返回</i>
      <el-container style="background-color: whitesmoke">
        <el-header style="font-size: 35px;background-color: whitesmoke">医院登记管理系统</el-header>
        <!-- <el-main>Main</el-main> -->
        <el-footer style="background-color: whitesmoke">医院名称登记</el-footer>
      </el-container>

      <el-form ref="form" :model="form" label-width="80px"  style="margin-top: 3%;">
        <el-form-item label="医院名称">
          <el-input v-model="IdCard"></el-input>
        </el-form-item>

        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit"  style="margin-top: 10%;">确定添加</el-button>
          <el-button  @click="goHome">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>


  // import fa from "./js/element-ui/src/locale/lang/fa";
  // import el from "./js/element-ui/src/locale/lang/el";

  var vm = new Vue({
    el: "#app",
    data: {
      activeIndex: '1',
      activeIndex2: '1',
      IdCard:'',
    },
    methods: {
      goHome(){
        window.location.href = './index.html'

      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      onSubmit() {
        console.log('submit!'+this.IdCard);

        var url = '/api/insertHost';

// 创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();

// 构建完整的URL，将参数附加在URL上
        var fullUrl = url + '?name=' + encodeURIComponent(this.IdCard);
        // var fullUrl = url + '?name=' + this.IdCard;
        // console.log(fullUrl)
// 设置请求方法和URL
        xhr.open('GET', fullUrl, true);

// 监听请求状态变化
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              // 请求成功，处理返回的数据
              // console.log(xhr.responseText);
              if (xhr.responseText=='true'){
                alert("该医院添加成功")
                window.location.assign("/index.html");

              }
              else{
                alert("该医院已经添加，请勿重复")
              }
            } else {
              // 请求发生错误，处理错误信息
              console.error('Request error:', xhr.status);
            }
          }
        };

// 发送请求
        xhr.send();


      }
    }
  })
</script>

</html>